<template>
    <div class="team pdTop pdBot">
        <h2 class="pdBot">{{$t('home.team.title')}}</h2>
        <b-container>
            <b-row>
                <dlb-swiper :perView="5" :perGroup="5" :delay="5000" :isShowPagination="true" type='team'>
                    <div class="swiper-slide" v-for="(item,index) in $t('home.team.people')" :key="index">
                        <div class="inner">
                            <div><img :src="require(`../images/${item.img}`)"></div>
                            <h3>{{item.name}}</h3>
                            <p>{{item.title}}</p>
                        </div>
                    </div>
                </dlb-swiper>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import dlbSwiper from '@/components/swiper'
export default {
    components:{ dlbSwiper },
    data() {
        return {
            
        }
    }
}
</script>

<style lang="scss" scoped>
.team{
    text-align: center;
    background: -webkit-linear-gradient(top,#ffffff,#f2f9ff);
    .swiper-slide{
        .inner{
            cursor: pointer;
            border-radius: 10px;
            height: 330px;
            margin: 20px 15px;
            padding-top: 20px;
            box-shadow: #91c8ff 0px 3px 10px;
            position: relative;
            h3{
                font-size: 22px;
                margin-top: 50px;
            }
            p{
                font-size:16px;
            }
            &:hover{
                background: -webkit-gradient(linear,100% 0%, 0% 0%, from(#a3c5ff), to(#7acbff)) !important;
                color:#fff;
                h3{
                    color:#fff;
                }
            }
        }
    }
}
</style>
